<template>
  <div class="bottom">
    <div class="title">
      <h3>历史缴费记录</h3>
    </div>
    <div>
      免缴费月份：{{ checkedMonth.toString() }}
      <el-button @click="updateMonth">修改</el-button>
    </div>
    <div>
      <span class="demonstration">选择年月：</span>
      <el-date-picker v-model="date" type="month" placeholder="选择年月">
      </el-date-picker>
      <el-dropdown style="margin-left: 20px">
        <span class="el-dropdown-link">
          缴纳状态<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>待缴纳</el-dropdown-item>
          <el-dropdown-item>待缴纳，一级延迟</el-dropdown-item>
          <el-dropdown-item>待缴纳，二级延迟</el-dropdown-item>
          <el-dropdown-item>已正常缴纳</el-dropdown-item>
          <el-dropdown-item>已缴纳，一级延迟</el-dropdown-item>
          <el-dropdown-item>已缴纳，二级延迟</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-button type="primary" style="margin-left: 20px">筛选</el-button>
    </div>
    <el-dialog
      title="管理费免缴月份"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
    >
      <el-checkbox-group
        v-model="checkedMonth"
        @change="handleCheckedCitiesChange"
      >
        <el-checkbox
          v-for="(month, index) in months"
          :label="month"
          :key="index"
          >{{ month }}</el-checkbox
        >
      </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="hid" label="编号" width="80"> </el-table-column>
      <el-table-column prop="hname" label="主持人姓名" width="150">
      </el-table-column>
      <el-table-column prop="hcosts" label="管理费" width="100">
      </el-table-column>
      <el-table-column prop="hoverdue" label="滞纳金" width="100">
      </el-table-column>
      <el-table-column prop="hquota" label="应缴金额" width="100">
      </el-table-column>
      <el-table-column prop="paystate" label="缴纳状态"> </el-table-column>
      <el-table-column prop="paytime" label="缴纳时间"> </el-table-column>
      <el-table-column label="操作">
        <el-button>编辑</el-button>
        <el-button>删除</el-button>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import api from "../../api";
const monthOption = [
  "一月",
  "二月",
  "三月",
  "四月",
  "五月",
  "六月",
  "七月",
  "八月",
  "九月",
  "十月",
  "十一月",
  "十二月",
];
export default {
  name: "AdmianFee",
  data() {
    return {
      form: {},
      dialogVisible: false,
      checkedMonth: [],
      months: monthOption,
      date: "",
      tableData: [],
    };
  },
  methods: {
    updateMonth() {
      this.dialogVisible = true;
    },
    //el-dialog 的 before-close 事件
    handleClose() {},
    //el-checkbox-group 的 change 事件
    handleCheckedCitiesChange() {},
  },
  mounted() {
    api.hostManager().then((res) => {
      console.log(res.data);
      if (res.status == 200) {
        this.tableData = res.data;
      }
    });
    api.getBottom().then((res) => {
      if (res.status === 200) {
        this.form = res.data;
      }
    });
    function company(arr) {
      return arr.sort((a, b) => a - b);
    }
  },
};
</script>

<style lang="less" scoped>
.bottom {
  padding-left: 20px;
  .title {
    text-align: center;
    padding: 20px;
    background-color: #c4b4a9;
    margin-bottom: 10px;
  }
}
</style>